<template>
	<view>
		<view class="provinces-picker" @click="onClose" @touchmove.prevent.stop>
			<view class="picker-view" @click.stop>

				<view class="title-view">
					<view class="cancel-but" @click="onClose">取消</view>
					<view class="title-text">{{title || ''}}</view>
					<view class="confirm-but" @click="onConfirm">确定</view>
				</view>

				<picker-view class="picker-item" indicator-class="indicator-css" :value="valueList"
					@change="pickerChange" v-if="provincesList.length">
					<picker-view-column>
						<view class="picker-text" v-for="item in provincesList" :key="item.id">
							{{item.name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-text" v-for="item in cityList" :key="item.id">
							{{item.name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-text" v-for="item in regionList" :key="item.id">
							{{item.name}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			value: {
				type: Array,
				default: () => []
			}
		},
		name: "ProvincesPicker",
		data() {
			return {
				valueList: [0, 0, 0],
				provincesList: [],
				cityList: [],
				regionList: []
			};
		},
		beforeMount() {
			if (!this.value.length) return this.init()
			this.getProvincesList()
		},
		methods: {
			onConfirm() {
				const [provinceIndex, cityIndex, regionIndex] = this.valueList
				const city = this.cityList[cityIndex]
				const region = this.regionList[regionIndex]
				const province = this.provincesList[provinceIndex]
				this.$emit('change', {
					province,
					city,
					region
				})
			},
			async pickerChange(event) {
				const [pIndex, cIndex, rIndex] = event.detail.value
				const [provinceIndex, cityIndex, regionIndex] = this.valueList
				if (pIndex != provinceIndex) {
					const province = this.provincesList[pIndex]
					const cRes = await uni.$api.getProvincesList({
						levelType: 2,
						parentId: province.id
					})
					const city = cRes.data[0]
					const res = await uni.$api.getProvincesList({
						levelType: 3,
						parentId: city.id
					})
					this.cityList = cRes.data
					this.regionList = res.data
					return this.valueList = [pIndex, 0, 0]
				}
				if (cIndex != cityIndex) {
					const city = this.cityList[cIndex]
					const res = await uni.$api.getProvincesList({
						levelType: 3,
						parentId: city.id
					})
					this.regionList = res.data
					return this.valueList = [pIndex, cIndex, 0]
				}
				this.valueList = event.detail.value
			},
			async getProvincesList() {
				const [provinceId, cityId, regionId] = this.value
				const pRes = await uni.$api.getProvincesList({
					levelType: 1
				})
				const cRes = await uni.$api.getProvincesList({
					levelType: 2,
					parentId: provinceId
				})
				const res = await uni.$api.getProvincesList({
					levelType: 3,
					parentId: cityId
				})
				const provinceIndex = pRes.data.findIndex(item => item.id == provinceId)
				const cityIndex = cRes.data.findIndex(item => item.id == cityId)
				const regionIndex = res.data.findIndex(item => item.id == regionId)
				this.cityList = cRes.data
				this.regionList = res.data
				this.provincesList = pRes.data
				this.valueList = [provinceIndex, cityIndex, regionIndex]
			},
			async init() {
				const pRes = await uni.$api.getProvincesList({
					levelType: 1
				})
				if (!pRes.data.length) return
				const province = pRes.data[0]
				const cRes = await uni.$api.getProvincesList({
					levelType: 2,
					parentId: province.id
				})
				if (!cRes.data.length) return
				const city = cRes.data[0]
				const res = await uni.$api.getProvincesList({
					levelType: 3,
					parentId: city.id
				})
				this.cityList = cRes.data
				this.regionList = res.data
				this.provincesList = pRes.data
			},
			onClose() {
				this.$emit('close')
			},
		}
	}
</script>

<style scoped lang="scss">
	@keyframes open-animate {
		to {
			bottom: 0upx;
		}
	}

	@keyframes open-background {
		to {
			background: rgba($color: #000000, $alpha: 0.7);
		}
	}

	.provinces-picker {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 30;
		background: rgba($color: #000000, $alpha: 0);
		animation: open-background 0.7s forwards;

		.picker-view {
			width: 100%;
			height: 600upx;
			border-radius: 20upx 20upx 0 0;
			position: absolute;
			left: 0;
			bottom: -1000px;
			animation: open-animate 0.5s forwards;
			background: #FFF;

			.title-view {
				width: 100%;
				height: 96upx;
				@extend .row-between;
				border-bottom: 1px solid #EFF2F5;

				.cancel-but {
					width: 100upx;
					height: 100%;
					@extend .column;
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #969799;
				}

				.title-text {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #323233;
				}

				.confirm-but {
					@extend .cancel-but;
					color: #DB4032;
				}
			}

			.indicator-css {
				height: 50px;
				background: #FFF2F2;
				z-index: 0;
			}

			.picker-item {
				width: 100%;
				height: 520upx;

				.picker-text {
					width: 100%;
					height: 50px;
					@extend .column;
				}
			}
		}
	}
</style>